<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="container">
				<view class="modle-title">店员信息</view>
				<view class="modle-info-box">
					<view class="info-item flexWrapNo">
						<view>用户名：</view>
						<input placeholder="请输入用户名" 
							placeholder-class="placeholderclass" 
							v-model="form.username"
							@paste="onPaste"
						/>
					</view>
					<view class="info-item flexWrapNo">
						<view>手机号：</view>
						<input placeholder="请输入手机号" 
							maxlength="11"
							type="tel"
							placeholder-class="placeholderclass" 
							v-model="form.mobile" 
						/>
					</view>
					<view class="info-item flexWrapNo">
						<view>性别：</view>
						<radio-group class="flexWrap radio-group" @change="gengderChange">
						    <label>
								<radio :value="'male'" :checked="form.genderdata=='male'" style="transform: scale(0.7);"/>男
						    </label>
							<label>
								<radio :value="'female'" :checked="form.genderdata=='female'" style="transform: scale(0.7);"/>女
							</label>
						</radio-group>
					</view>
					<view class="info-item flexWrapNo">
						<view>状态：</view>
						<radio-group class="flexWrap radio-group" @change="statusChange">
						    <label>
								<radio :value="'normal'" :checked="form.status=='normal'" style="transform: scale(0.7);"/>正常
						    </label>
							<label>
								<radio :value="'hidden'" :checked="form.status=='hidden'" style="transform: scale(0.7);"/>禁用
							</label>
						</radio-group>
					</view>
					<view class="info-item flexWrapNo">
						<view>角色：</view>
						<radio-group class="flexWrap radio-group" @change="roleChange">
						    <label>
								<radio :value="1" :checked="form.roles==1" style="transform: scale(0.7);"/>店长
						    </label>
							<label>
								<radio :value="2" :checked="form.roles==2" style="transform: scale(0.7);"/>运维
							</label>
							<label>
								<radio :value="3" :checked="form.roles==3" style="transform: scale(0.7);"/>保洁
							</label>
						</radio-group>
					</view>
					<view class="remaks-box">新建店员账号，初始密码为123456</view>
				</view>
				<view class="submit-btn" @tap="submit">提交保存</view>	
			</view>	
		</template>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				pageOpc:0,
				id:'',
				form:{
					username:'', // 花名
					mobile:'' , // 手机号
					genderdata:"male" , // 性别  0：女  1：男
					status:"normal",
					roles:1
				},
				old_roles:""
			}
		},
		
		onReady() {
			setTimeout(() => {
				this.pageOpc = 1
			}, 100)
		},
		onLoad(options) {
			this.id=options.id
			if(this.id){
				this.getclerkDetails();
			}
		},
		methods:{
			onPaste(event) {
				// 处理粘贴时的内容限制
			    const clipboardData = event.clipboardData || window.clipboardData;
			    const pastedText = clipboardData.getData('text');
			
			    // 允许最多粘贴的字符
			    const maxLength = 6;
			    const remainingText = pastedText.slice(0, maxLength+1);
			
			    // 阻止默认粘贴行为并手动将处理后的文本设置到输入框
			    event.preventDefault();
			    // 这里需要使用$nextTick确保输入框的值被更新
			    this.$nextTick(() => {
			      event.target.value = remainingText;
			    });
			},
			// 性别切换
			gengderChange(e){
				this.form.genderdata=e.detail.value
			},
			//状态切换
			statusChange(e){
				this.form.status=e.detail.value
			},
			// 性别切换
			roleChange(e){
				this.form.roles=e.detail.value
			},
			// 获取店员信息
			getclerkDetails(){
				this.$request.post(this.$api.staffInfo, {
					admin_id:this.id,
				},{
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					// data.status=data.status=='normal'?1:0
					this.form=data
					this.old_roles=data.roles
				})
			},
			isValid(str) {
			  const regex = /[\u4e00-\u9fa5]|[^\w\s]/;
			  return !regex.test(str);
			},
			// 提交
			submit(){
				this.form.store_id=uni.getStorageSync('store_id')
				if (!this.form.username) {
					this.$tools.showToast('请输入用户名');
					return;
				}
				if (!this.isValid(this.form.username)) {
					this.$tools.showToast('用户名不能为中文');
					return;
				}
				if (!this.$tools.isPhone(this.form.mobile)) {
					this.$tools.showToast('请输入正确的手机号');
					return;
				}
				
				uni.showModal({
					title: '确定提交？',
					content: '提交后，店员即可启用',
					confirmText:'确定提交',
					confirmColor:'#45B250',
					success: res=> {
						if (res.confirm) {
							let requestUrl=""
							if(this.form.id){
								requestUrl=this.$api.staffUpdatePro
							}else{
								requestUrl=this.$api.staffAdd
							}
							let form=this.form
							// form.status=this.form.status==1?'normal':'hidden'
							form.admin_id=this.form.id
							form.old_roles=this.old_roles
							this.$request.post(requestUrl,form, {
								token:true
							}).then(res => {
								let {
									data = {}
								} = res;
								if(res.code==1){
									this.$tools.showToast('操作成功');
									let pages = getCurrentPages(); //当前页
									let beforePage = pages[pages.length - 2]; //上个页面
									beforePage.$vm.getList()
									setTimeout(()=>{
										uni.navigateBack()
									},1000)
								}
							})
						} 
					}
				})	
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container{
		padding: 30upx;
		overflow: hidden; // 解除BFC问题
		.modle-title{
			font-size: 36rpx;
			font-weight: bold;
			color: #fff;
			text-align: center;
			letter-spacing: 2rpx;
			&:not(:first-child){
				margin-top: 60rpx;
			}
		}
		/deep/.modle-info-box {
			.info-item {
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40upx;
				color: #FFFFFF;
				padding: 30upx 0;
				border-bottom: 1upx solid #36355E;
				position: relative;
				.small {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin: 0 40upx;
				}
				picker{
					flex: 1;
				}
				.select-input{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFE577;
					flex: 1;
				}
				input {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFE577;
					flex: 1;
				}
		
				.icon-more {
					border-color: #FFFFFF;
					position: absolute;
					right: 10rpx;
					pointer-events: none;
				}
		
				.placeholderclass {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFE577;
				}
				.radio-group{
					gap: 40rpx;
				}
			}
			.add-lable{
				margin-top: 6rpx;
				color: #26BCFD;
				font-size: 26rpx;
				
			}
			.remaks-box{
				font-size: 28rpx;
				color: #82819B;
				line-height: 40rpx;
				margin-top: 12upx;
			}
			
			.attachment-box {
				margin-top: 30upx;
				flex-wrap: wrap;
				gap: 20rpx;
				.add-btn {
					width: 156rpx;
					height: 156rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 1upx solid #36355E;
					position: relative;
					flex-shrink: 0;
			
					&::after {
						content: "";
						display: inline-block;
						width: 40upx;
						height: 4upx;
						background: #36355E;
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto;
					}
			
					&::before {
						content: "";
						display: inline-block;
						width: 4upx;
						height: 40upx;
						background: #36355E;
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto;
					}
				}
			
				.attachment-img {
					width: 156rpx;
					height: 156rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					position: relative;
					flex-shrink: 0;		
					.close-btn {
						position: absolute;
						top: -10upx;
						right: -10upx;
						width: 40upx;
						height: 40upx;
					}
				}
			}
			
			.attachment-tips {
				font-size: 24upx;
				margin-top: 20upx;
			}
		}
		
		.submit-btn{
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			width: 500rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #26BCFD;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin: 60rpx auto;
		}
	}	
</style>